<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="border-left: 6px solid #409eff; padding-left: 8px">员工管理</span>
      </div>
      <div class="text item">
        <el-input v-model="inputNo" placeholder="请输入员工信息" style="width: 180px;"></el-input>
        <el-button
          type="primary"
          @click="showAddDialog"
          style="float: right;margin-bottom: 5px;"
        >添加员工</el-button>

        <el-table :data="filteredEmp" style="width: 100%">
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="密码" prop="password"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="性别" prop="sex">
            <template slot-scope="{ row }">{{ row.sex === '1' ? '男' : '女' }}</template>
          </el-table-column>
          <el-table-column label="身份证号" prop="idNumber"></el-table-column>
          <el-table-column label="员工类型" prop="empType"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="showEditDialog(row)">编辑</el-button>
              <el-button
                type="text"
                @click="deleteEmployee(row.id)"
                :disabled="row.username === 'root' && row.empType === '管理人员'"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="添加/编辑员工">
      <el-form ref="employeeForm" :model="employee" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="employee.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="employee.username"
            :disabled="employee.username === 'root' && employee.empType === '管理人员'"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="employee.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="employee.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="employee.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="employee.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="员工类型" prop="empType">
          <el-radio-group v-model="employee.empType">
            <el-radio label="普通员工" v-if="employee.empType === '普通员工'">普通员工</el-radio>
            <el-radio label="管理人员" v-if="employee.empType === '管理人员'">管理人员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="saveEmployee">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputNo: "",
      employees: [], // 员工列表数据
      dialogVisible: false, // 是否显示添加/编辑员工对话框
      employee: {
        // 当前正在编辑的员工信息
        id: "",
        name: "",
        username: "",
        password: "",
        phone: "",
        sex: "",
        idNumber: "",
        empType: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "姓名长度在 2 到 20 个字符之间",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "请输入员工用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "用户名长度在 6 到 20 个字符之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码长度在6到20个字符之间",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        idNumber: [
          { required: true, message: "请输入员工身份证号", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getEmployees();
  },
  computed: {
    filteredEmp() {
      return this.employees.filter((emp) => {
        return (
          emp.name.indexOf(this.inputNo) !== -1 ||
          emp.username.indexOf(this.inputNo) !== -1 ||
          emp.phone.indexOf(this.inputNo) !== -1 ||
          emp.idNumber.indexOf(this.inputNo) !== -1 ||
          emp.empType.indexOf(this.inputNo) !== -1
        );
      });
    },
  },
  methods: {
    //查询员工列表
    async getEmployees() {
      // 此处编写获取员工列表数据的逻辑
      // 在这里提交表单
      await this.$axios
        .post("/api/emp/sel", "", {
          headers: { Authorization: "emp" },
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.employees = [...res.data.data];
          } else if (res.data.code === 0) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          this.$message.error("net ero");
        });
    },
    //显示添加弹框
    showAddDialog() {
      this.dialogVisible = true;
      this.employee = {
        id: "",
        name: "",
        username: "",
        password: "",
        phone: "",
        sex: "1",
        idNumber: "",
        empType: "普通员工",
      };
    },
    //显示编辑弹框
    showEditDialog(employee) {
      this.dialogVisible = true;
      this.employee = Object.assign({}, employee);
    },
    //更新员工信息
    async saveEmployee() {
      this.$refs.employeeForm.validate(async (valid) => {
        if (valid) {
          // 此处编写表单提交逻辑，保存或更新员工信息
          await this.$axios
            .post("/api/emp/save", this.employee, {
              headers: { Authorization: "emp" },
            })
            .then((res) => {
              if (res.data.code === 1) {
                this.getEmployees();
                this.$message.success(res.data.msg);
                this.dialogVisible = false;
              } else if (res.data.code === 0) {
                this.$message.error(res.data.msg);
              }
            })
            .catch((error) => {
              // 处理请求失败的错误
              this.$message.error("net ero");
            });
        } else {
          console.log("表单验证失败");
          return false;
        }
      });
    },
    // 删除
    async deleteEmployee(id) {
      // 此处编写删除员工信息的逻辑
      await this.$axios
        .delete("/api/emp/del/" + id, {
          headers: { Authorization: "emp" },
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.getEmployees();
            this.$message.success(res.data.msg);
          } else if (res.data.code === 0) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          this.$message.error("net ero");
        });
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
